<template>
	<view class="content">
    <view class="leftMenu">
      <view v-for="list,index of classifyData" :key="index" class="list" :class="classifyDataValue===list.id?'active':''" @click="menuClick(list)">{{ list.title }}</view>
    </view>
		<view class="rightCont">
			<view v-for="list,index of twoClassifyData" :key="index" class="list" @click="rightListClick(list,index)">
        <view class="isRadio" :class="returnFun(list)">
          <uni-icons type="circle" class="ico1" />
          <uni-icons type="checkbox-filled" class="ico2" />
        </view>
        <image class="images" :src="list"></image>
      </view>
      <button class="saveBut" @click="saveFun()">保存图片到相册</button>
		</view>
	</view>
</template>

<script>
  import { getApi, postApi } from "@/api/index.js"
	export default {
		data() {
			return {
				title: 'Hello',
        goods_id: '',
        queryData: '',
        classifyData: [],
        classifyDataValue: 1,
        twoClassifyData: [],
        twoClassifyDataValue: []
			}
		},
		onLoad(option) {
		  console.log(option)
		  this.goods_id = option.id
		  uni.setNavigationBarTitle({
		    title: '团品素材下载' // 设置为你想要显示的标题文本
		  });
		},
    onShow() {
      this.classifyData = [{
        id: 1,
        title: '团品主图素材'
      },{
        id: 2,
        title: '团品详情素材'
      },{
        id: 3,
        title: '团品实拍素材'
      },{
        id: 4,
        title: '团品资质授权'
      },{
        id: 5,
        title: '关于售后素材'
      }]
      // 使用获取到的值
      this.init()
		},
		methods: {
      init(){
        this.twoClassifyDataValue = []
        postApi('/goods/filesList', {
          goods_id: this.goods_id,
          type: this.classifyDataValue
        }).then(res => {
          if(res.code === 1){
            this.loading = false
            this.twoClassifyData = res.data
            this.twoClassifyData.map((item, index) => {
              this.twoClassifyDataValue.push(item)
            })
            // this.twoClassifyDataValue.push(this.twoClassifyData[1])
            // console.log(this.twoClassifyDataValue)
          }
        }).catch(err => {
          this.loading = false
        })
      },
      returnFun(url){
        if(this.twoClassifyDataValue.toString().indexOf(url) >= 0){
          return 'radioTrue'
        }
      },
      menuClick(row){
        this.classifyDataValue = row.id
        this.init()
      },
      rightListClick(url, index){
        if(this.twoClassifyDataValue.toString().indexOf(url) < 0){
          this.twoClassifyDataValue.push(url)
        }else{
          this.twoClassifyDataValue.map((item, index) => {
            if(item===url){
              this.twoClassifyDataValue.splice(index, 1)
            }
          })
        }
      },
      saveImageToPhotosAlbum(imagePath, index) {
        let _this = this
        // 下载图片到本地
        uni.downloadFile({
          url: imagePath, // 替换为您的图片URL
          success: (res) => {
            if (res.statusCode === 200) {
              // 下载成功，保存到相册
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function() {
                  // uni.showToast({
                  //   title: "保存成功",
                  //   icon: "none"
                  // });
                  console.log(`图片 ${index + 1} 保存成功`);
                  // 如果还有更多图片，继续保存
                  if (index < _this.twoClassifyDataValue.length - 1) {
                    _this.saveImageToPhotosAlbum(_this.twoClassifyDataValue[index + 1], index + 1);
                  } else {
                    uni.showToast({
                      title: '所有图片保存成功'
                    });
                  }
                },
                fail: function() {
                  uni.showToast({
                    title: "保存失败",
                    icon: "none"
                  });
                }
              });
            }
          }
        });
      },
      saveFun(){
        let _this = this
        uni.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              // 用户未授权，请求权限
              uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  // 用户授权后的操作
                  // this.saveImageToPhotosAlbum(yourImagePath);
                  // 从第一张图片开始保存
                  if (_this.twoClassifyDataValue.length > 0) {
                    _this.saveImageToPhotosAlbum(_this.twoClassifyDataValue[0], 0);
                  } else {
                    uni.showToast({
                      title: '没有图片可以保存'
                    });
                  }
                },
                fail() {
                  // 用户拒绝授权的处理
                  uni.showToast({
                    title: '未授权保存图片到相册！',
                    icon: 'none'
                  });
                }
              });
            } else {
              // 用户已授权，直接保存图片
              // this.saveImageToPhotosAlbum(yourImagePath);
              // 从第一张图片开始保存
              if (_this.twoClassifyDataValue.length > 0) {
                _this.saveImageToPhotosAlbum(_this.twoClassifyDataValue[0], 0);
              } else {
                uni.showToast({
                  title: '没有图片可以保存'
                });
              }
            }
          },
          fail(res) {
            // 获取权限设置失败的处理
            uni.showToast({
              title: '获取权限设置失败',
              icon: 'none'
            });
          }
        });
      }
    }
	}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  height: 100vh;
  .leftMenu{
    width: 210rpx;
    height: 100%;
    background: #F8F8F8;
    overflow: auto;
    .list{
      position: relative;
      width: 100%;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      font-size: 24rpx;
      color: #000000;
    }
    .list.active{
      background: #FFFFFF;
      &::after{
        content: '';
        position: absolute;
        right: 0px;
        top: 0px;
        width: 6rpx;
        height: 46rpx;
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        background: #74C4BC;
      }
    }
  }
  .rightCont{
    position: relative;
    width: calc(100% - 210rpx);
    padding: 20rpx 10rpx 20rpx 30rpx;
    background: #fff;
    height: 100%;
    overflow: auto;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .saveBut{
      position: fixed;
      bottom: 60rpx;
      right: 40rpx;
      width: 444rpx;
      height: 80rpx;
      background: #CFB4A7;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
      z-index: 99;
    }
    .list{
      margin-bottom: 20rpx;
      position: relative;
      width: 47%;
      padding-right: 3%;
      float: left;
      .isRadio{
        position: absolute;
        right: 30rpx;
        top: 12rpx;
        width: 26rpx;
        height: 26rpx;
        text-align: center;
        line-height: 26rpx;
        z-index: 9;
        .ico1{
          display: block;
        }
        .ico2{
          display: none;
        }
      }
      .radioTrue{
        .ico1{
          display: none;
        }
        .ico2{
          display: block;
        }
      }
      .images{
        width: 100%;
        height: 236rpx;
      }
      .text{
        display: inline-block;
        width: 100%;
        margin: 10rpx 0;
        text-align: center;
      }
    }
  }
}
</style>
